<template>
    <section class="page">
        <!-- 头部 -->
        <HeadTop :title="address.name" :search="search" :login="login"></HeadTop>
        <!-- swipe -->
        <Swipe class="swipe" :auto="5000" v-if="categoryArr.length > 0">
          <SwipeItem class="item" v-for="(list,index) in categoryArr" :key="index">
             <a href="javascript:" v-for="(item,index) in list" :key="index">
               <img :src="imgBaseUrl+item.image_url"><span>{{item.title}}</span>
             </a>
          </SwipeItem>
        </Swipe>
        <!-- 附近商家 -->
        <ShopList/>
    </section>
</template>
<script>
import { Swipe, SwipeItem } from 'mint-ui'

import HeadTop from '@/components/HeadTop/HeadTop'
import ShopList from '@/components/ShopList/ShopList'

import { mapState } from 'vuex'

export default {
  data: function () {
    return {
      search: true,
      login: true,
      imgBaseUrl: 'https://fuss10.elemecdn.com'
    }
  },
  mounted () {
    this.$store.dispatch('getCategorys')
  },
  computed: {
    ...mapState(['address', 'categorys']),

    categoryArr () {
      const max = 8
      const arr = []
      const {categorys} = this
      let smallArr = []
      categorys.forEach((c, index) => {
        if (smallArr.length === 0) {
          arr.push(smallArr)
        }
        smallArr.push(c)
        if (smallArr.length === max) {
          smallArr = []
        }
      })
      return arr
    }
  },
  components: {
    HeadTop,
    ShopList,
    Swipe,
    SwipeItem
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.page
  .swipe
    background #fff
    height 200px
    padding-bottom 20px
    border-bottom #dedede 1px solid
    .mint-swipe-indicator
         background gray
    .mint-swipe-indicator.is-active
         background blue
    .item
      display flex
      flex-wrap wrap
      width 100%
      a
       width 25%
       text-align center
       display flex
       justify-content center
       align-items center
       flex-direction column
       img
        display block
        width  60px
        height  60px
      span
        font-size 14px

</style>
